<template>
    <div>
        <!--<h1>个人信息</h1>-->
        <div class="panel panel-default">
            <!--顶部-->
            <div class="panel-heading">
                <h3 class="panel-title text-left">个人资料</h3>
            </div>
            <!--身体部分-->
            <div class="panel-body">
                <!--头像-->
                <el-card>
                    <el-upload
                            class="avatar-uploader"
                            :action="action_url"

                            :show-file-list="true"
                            :on-success="handleAvatarSuccess"
                            :on-change="handleChange"
                            :on-remove="handleRemove"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <span v-if="imageUrl" class="el-upload-action" @click.stop="handleRemove()">
                    <i class="el-icon-delete"></i>
                </span>
                        <i v-else class="el-icon-upload2 avatar-uploader-icon" stop></i>
                    </el-upload>
                </el-card>
                <br>


                <span class="full-left">
                     <el-button>昵称</el-button>&nbsp;&nbsp;&nbsp;
                    <el-input
                            placeholder=""
                            v-model="user_nickname"
                            :disabled="true"
                            clearable>
                    </el-input>
                </span>


                <br>
                <span class="full-left">
                <!--<el-button type="text">昵称</el-button>-->
                     <el-button>手机</el-button>&nbsp;&nbsp; &nbsp;
                    <el-input
                            placeholder="请输入内容"
                            v-model="user_mobile"
                            :disabled="true"
                            clearable>
                    </el-input>
                </span>


            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "InfoDetail",
        data() {
            return {
                imageUrl: '',
                files: [],
                action_url: '',
                user_nickname: '',
                user_mobile: '',
                user_id: '',

            }
        },
        created() {
            this.user_id = this.$cookies.get('user_dict').id;
            this.user_nickname = this.$cookies.get('user_dict').nickname;
            this.user_mobile = this.$cookies.get('user_dict').mobile;
            this.action_url = `${this.$settings.base_url}/useroperation/changeavatar/${this.user_id}/`;
            this.$axios.get(`${this.$settings.base_url}/useroperation/checkavatar/${this.user_id}/`).then(response => {
                // console.log(response.data.avatar)
                this.imageUrl = response.data.avatar
            })
        },
        methods: {
            //查看头像
            handleChange(file, fileList) {
                let _this = this;
                let event = event || window.event;
                let file1 = event.target.files[0];
                let reader = new FileReader();
                //转base64
                reader.onload = function (e) {
                    _this.imageUrl = e.target.result //将图片路径赋值给src
                };
                reader.readAsDataURL(file1);
            },

            // 移除图片
            handleRemove() {
                this.files = [];
                this.imageUrl = ''
            },
            // 上传成功回调
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);

                this.files.push(file)
            },
            // 上传前格式和图片大小限制
            beforeAvatarUpload(file) {
                const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!type) {
                    this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return type && isLt2M
            }
        },

    }


</script>

<style>

    .avatar-uploader {
        width: 100PX;
        height: 100px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background-color: #eee;
    }

    .el-input {
        width: 400px !important;
    }

    .avatar-uploader-icon {
        box-sizing: border-box;
        font-size: 28px;
        color: #b7b7b7;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .avatar-uploader-icon:hover {
        border: 1px dashed #b7b7b7;
        color: #fff;
        background-color: rgba(0, 0, 0, .3);
    }

    .avatar {
        position: relative;
        width: 100px;
        height: 100px;
        display: block;
    }

    .el-upload-action {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
        color: #fff;
        text-align: center;
        line-height: 100px;

    }

    .el-upload-action:hover {
        font-size: 20px;
        background-color: #000;
        background-color: rgba(0, 0, 0, .3)
    }

    .el-card {
        width: 140px !important;
    }

</style>